<template>
  <div class="framework">
    <el-container class="h100">
      <el-header>
        <div class="logo">XX管理系统管理系统</div>
        <div class="headerMain">
          <!-- <div class="topNav vertical">
            <div><i class="el-icon-menu"></i><span>分类</span></div>
            <ul>
              <li class="on">导航导航</li>
              <li>导航导航</li>
              <li>导航导航</li>
              <li>导航导航</li>
              <li>导航导航</li>
              <li>导航导航</li>
            </ul>
          </div> -->
        </div>
        <div class="navBtn">
          <!-- <i class="el-icon-setting"></i>
          <i class="el-icon-star-off"></i>
          <i class="el-icon-goods"></i> -->
          <el-avatar
            :size="40"
            fit="fill"
            :src="tx"
          ></el-avatar>
          <span>{{user.userName}}</span>
          <span @click="SwitchingClass">{{CurrentClass.gradeName+CurrentClass.className}}(点击切换班级)</span>
          <span
            v-if="user.userName"
            @click="out"
          >退出系统</span>
        </div>
      </el-header>
      <el-container class="noHead">
        <el-aside :class="{'hide':!sideNav}">
          <el-menu
            :default-active="defaultNav"
            class="el-menu-vertical-demo"
            background-color="#3a4c5d"
            text-color="#fff"
            :unique-opened=true
            router
          >
            <el-menu-item index="/News">
              <i class="el-icon-tickets"></i>
              <span slot="title">新闻</span>
            </el-menu-item>
            <el-menu-item
              index="/Notice"
              v-if="user.roleCodeList.indexOf('ClassManager')>0"
            >
              <i class="el-icon-menu"></i>
              <span slot="title">班级公告</span>
            </el-menu-item>
            <el-menu-item
              index="/SchoolNotice"
              v-if="user.roleCodeList.indexOf('SchoolManager')>0"
            >
              <i class="el-icon-menu"></i>
              <span slot="title">校园公告</span>
            </el-menu-item>
            <el-submenu
              index="/GroupManagement"
              v-if="user.roleCodeList.indexOf('ClassManager')>0"
            >
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>班级管理</span>
              </template>
              <el-menu-item index="/GroupManagement">小组管理</el-menu-item>
              <el-menu-item index="/StudentManagement">学生管理</el-menu-item>
              <el-menu-item index="/ClassCadres">班委管理</el-menu-item>
              <el-menu-item index="/DutyManage">值日生管理</el-menu-item>
            </el-submenu>
            <el-menu-item
              index="/Honor"
              v-if="user.roleCodeList.indexOf('ClassManager')>0"
            >
              <i class="el-icon-medal"></i>
              <span slot="title">光荣时刻</span>
            </el-menu-item>
            <el-menu-item
              index="/ClassCulture"
              v-if="user.roleCodeList.indexOf('ClassManager')>0"
            >
              <i class="el-icon-wind-power"></i>
              <span slot="title">班级文化</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view
            @DefaultNav1="DefaultNav"
            ref="child"
            :ClassId="CurrentClass.classId"
            :ClassName="CurrentClass.gradeName+CurrentClass.className"
            :url="url"
            :isSchoolManager="user.roleCodeList.indexOf('SchoolManager')>0?1:0"
            :isClassManager="user.roleCodeList.indexOf('ClassManager')>0?1:0"
          ></router-view>
        </el-main>
      </el-container>
    </el-container>
    <el-dialog
      title="请选择班级"
      :visible.sync="dialogVisible"
      :before-close="Close"
    >
      <el-select
        v-model="CurrentClassId"
        placeholder="请选择"
        @change="change"
      >
        <el-option
          v-for="item in classList"
          :key="item.classId"
          :label="item.gradeName+item.className"
          :value="item.classId"
        >
        </el-option>
      </el-select>
    </el-dialog>
  </div>
</template>

<script>
import tx from "../assets/img/tx.png"
export default {
  data() {
    return {
      sideNav: true,
      defaultNav: "",
      dialogVisible: false,
      CurrentClass: {},
      classList: [],
      user: { roleCodeList: [] },
      CurrentClassId: "",
      url: "",
      tx:tx
    };
  },
  mounted() {
    this.CurrentClass = this.$store.state.CurrentClass;
    this.loadUser();
  },
  methods: {
    DefaultNav(data) {
      this.defaultNav = data;
    },
  }
};
</script>

<style scoped>
</style>
